{% extends "bussiness/dash_empresa.html" %}

{% block mystylesheet %}
<link rel="stylesheet" href="{{ STATIC_URL }}js/pnotify-1.2.0/jquery.pnotify.default.css" type="text/css" />
<link rel="stylesheet" href="{{ STATIC_URL }}js/pnotify-1.2.0/use for pines style icons/jquery.pnotify.default.icons.css<" type="text/css" />
{% endblock mystylesheet%}

{% block myjavascript %}
<script language="javascript" src="{{ STATIC_URL }}js/pnotify-1.2.0/jquery.pnotify.js"></script>
<script>
     function combo(clicked_id) {
        var is_checked = document.getElementById(clicked_id).checked;
        if(is_checked){
            document.getElementById('planIdSeleccionado').value = clicked_id;
        }
        else{
            document.getElementById('planIdSeleccionado').value = 0;
        }
    }

    function elegirPlan(){
        var plan_elegido = document.getElementById('planIdSeleccionado').value;
        if(plan_elegido == 0){
                $.pnotify({
                title: 'Error',
                text: 'Es necesario que seleccione un plan.',
                type: 'Error',
                hide: true
                });
            document.getElementById('my-form').onsubmit = function() {
                return false;
            }
        }
    }
</script>
{% endblock myjavascript %}

{% block dashboard %}
<a href="{% url 'pago_plan' %}">Pagar</a>
<form id="my-form" action="" method="post">
    {% csrf_token %}
    <table class="table table-hover">
    <thead>
        <tr>
            <th>Plan</th>
            <th>Descripcion</th>
            <th>Precio</th>
            <th>Cantidad de Items</th>
            <th>Comprar</th>
        </tr>
    </thead>
    <tbody>
    {% for plan in planes %}
        <tr>
            <td>{{ plan.nombre }}</td>
            <td>{{ plan.descripcion }}</td>
            <td>{{ plan.precio }}</td>
            <td>{{ plan.cant_items }}</td>
            <td>
                <input type="radio" name="radio_checked" id={{ plan.id }} onclick="combo(this.id)" />
            </td>
        </tr>
    {% endfor %}
    </tbody>
    </table>
    <input type="hidden" name="planIdSeleccionado" id="planIdSeleccionado" value="" />
    <input type="submit" value="Elegir Plan" onclick=elegirPlan() class="btn btn-success" />
</form>
{% endblock dashboard %}
